import Comments from '@/components/comment/comment';
import FooterRecommendReading from '@/components/footerRecommendReading';
import { IRouteComponentProps, SettingModelState, useSelector } from 'umi';
import ImageViewer from '@/components/ImageViewer';
import styles from './index.less';

const PageDetail: React.FC<IRouteComponentProps<{ id: string }>> = ({
  match,
}) => {
  const id = match.params.id;
  const { pageSetting } = useSelector(
    (state: { setting: SettingModelState }) => state.setting,
  );
  const detail = pageSetting.find((item) => item.path === id);

  if (!detail) {
    return null;
  }
  return (
      <div id={styles.js_page_wrapper}>
        <ImageViewer>
        <div className={styles.container}>
          {detail.cover ? (
            <div className={styles.image}>
              <img src={detail.cover} alt="" />
            </div>
          ) : (
            ''
          )}
          <div className={styles.text_box}>
            <div className={styles.markdown}>
              <div dangerouslySetInnerHTML={{ __html: detail!.html }}></div>
            </div>
          </div>
        </div>
        {/* 评论模块 */}
        <Comments id={detail.id} />
        {/* 推荐阅读模块 */}
        <FooterRecommendReading />
        </ImageViewer>
      </div>
  );
};

export default PageDetail;
